<template>
  <div id="dragTargetContainer" class="portl-card-container">
    <grid-layout
      ref="gridlayout"
      :layout.sync="layout"
      :col-num="colNum"
      :row-height="60"
      :is-draggable="isSetting"
      :is-resizable="isSetting"
      :vertical-compact="false"
      :margin="[16, 16]"
      :use-css-transforms="true"
    >
      <transition-group
        ref="carditems"
        :duration="duration"
        :enter-active-class="'animate__bounceIn'"
        :leave-active-class="'animate__zoomOut'" >
        <grid-item
          class="animate__animated"
          v-for="item in layout"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="item.i"
          :static="item.i === '-1' ? true : false "
          :drag-allow-from="'.card-actions.drag'"
          @resized="resizedEvent"
          @resize="resizeEvent"
        >
          <{{componentName}} v-bind="item" ref="cardItem"></{{componentName}}>
          <transition enter-active-class="animate__bounceIn" leave-active-class="animate__bounceOut" >
            <a-icon v-if="isSetting" class="animate__animated card-actions close" type="close" @click="removeItem(item)"/>
          </transition>
          <transition enter-active-class="animate__bounceIn" leave-active-class="animate__bounceOut" >
            <a-icon v-if="isSetting" class="animate__animated card-actions drag" type="drag" />
          </transition>
        </grid-item>
      </transition-group>
    </grid-layout>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
import {{componentName}} from '../../../../src/components/{{componentName}}'
const { card_config: cardConfig = {} } = require('../../../../package.json')

export default {
  name: 'PortalWorkplace',
  components: {
    {{componentName}}
  },
  props: {
    isMobile: {
      type: Boolean,
      default: () => false
    }
  },
  beforeRouteUpdate (to, from, next) {
    this.toogleView('1').then((view) => {
        next()
    })
  },
  data () {
    return {
        colNum: 24,
        duration: 100,
        layout: [
        ]

    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      portalSetMenuId: 'portalSetMenuId',
      isSetting: 'portalSetStatus',
      gisView: 'gisView',
      gisMap: 'gisMap'
    })
  },
  created () {
      this.toogleView('1').then(() => {
        this.layout = [
          { 'x': 0, 'y': 0, 'w': cardConfig.width || 1, 'h': cardConfig.height || 1, 'i': '1' }
        ]
      })
  },
  mounted () {
  },
  methods: {
    ...mapMutations({
      setStatus: 'SET_STATUS',
      setMenuId: 'SET_CURRENTMENUID'
    }),
    ...mapActions({
      toogleView: 'TOOGLE_VIEW'
    }),
    removeItem (item) {
      const index = this.layout.map(item => item.i).indexOf(item.i)
      this.layout.splice(index, 1)
    },
    resizedEvent (i, newH, newW, newHPx, newWPx) {
      // eslint-disable-next-line eqeqeq
      const vm = this.$refs.cardItem.find(vm => vm.i && vm.i == i)
      if (vm.hook_resized && typeof (vm.hook_resized) === 'function') {
         vm.hook_resized(i, newH, newW, newHPx, newWPx)
      }
    },
    resizeEvent (i, newH, newW, newHPx, newWPx) {
      // eslint-disable-next-line eqeqeq
      const vm = this.$refs.cardItem.find(vm => vm.i && vm.i == i)
      if (vm.hook_resize && typeof (vm.hook_resize) === 'function') {
         vm.hook_resize(i, newH, newW, newHPx, newWPx)
      }
    }
  },
  destroyed () {
  }
}
</script>
<style lang="less" scoped>
.portl-card-container{
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
